<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>echart图模版</title>
		<style>
			h2{
				color: #FFFFFF;
			}
			.bg{
				background: url(./img/bg.jpg);
				background-repeat:repeat-y;
				background-size: cover;
			}
		</style>
		<script src="js/jquery.min.js"></script>
		<script src="js/bootstrap.min.js"></script>
		<script src="js/echarts4.0.2.js"></script>
	</head>
	<body class="bg" style="height: 100%;">
		<div style="height:350px;float: left">
			<h2>项目分析折线图</h2>
			<div id="div1"></div>
		</div>
		<div style="height:350px;float: right;margin-right: 10px;">
			<h2>柱状图</h2>
			<div id="div2"></div>
		</div>
		<div style="clear:both;margin-bottom: 20px;"></div>
		<div style="height:350px;float: left">
			<h2>圈圈图</h2>
			<div id="div3"></div>
		</div>
		<div style="height:350px;float: right;margin-right: 10px;">
			<h2>仪表图</h2>
			<div id="div4"></div>
		</div>
		<div style="clear:both;margin-bottom: 20px;"></div>
		<div style="height:350px;float: left">
			<h2>漏斗图</h2>
			<div id="div5"></div>
		</div>
		<div style="height:350px;float: right;margin-right: 10px;">
			<h2>实到外资</h2>
			<div id="div6"></div>
		</div>
		<div style="clear:both;margin-bottom: 20px;"></div>
		<div style="height:350px;float: left">
			<h2>资金分析-折线图</h2>
			<div id="div7"></div>
		</div>
		<div style="height:350px;float: right;margin-right: 10px;">
			<h2>用地分析</h2>
			<div id="div8"></div>
		</div>
		<div style="clear:both;margin-bottom: 20px;"></div>
		<div style="height:350px;float: left">
			<h2>用地分析</h2>
			<div id="div9"></div>
		</div>
		<div style="height:350px;float: right;margin-right: 10px;">
			<h2>投资完成情况</h2>
			<div id="div10"></div>
		</div>
		<div style="clear:both;margin-bottom: 20px;"></div>
		<div style="height:350px;float: left">
			<h2>年度投资计划</h2>
			<div id="div11"></div>
		</div>
		<div style="height:350px;float: right;margin-right: 10px;">
			<h2>分管领导负责项目</h2>
			<div id="div12"></div>
		</div>
		<script>
			$(function(){
				div1();
				div2();
				div3();
				div4();
				div5();
//				div6();
				div7();
				div8();
				div9();
				div10();
				div12();
			})
			
			function div1(){
//				var echartWidth = $(window).width() * 0.246;
//				var echartHeight = $(window).height() * 0.298;
				var echartWidth = 500;
				var echartHeight = 300;
				var legend = ['新增项目','签约项目'];
				var xAxisData = ['1月','2月','3月','4月','5月','6月','7月'];
				var data1 = [11, 11, 15, 13, 12, 13, 10];
				var data2 = [7, 15, 11, 15, 13, 12, 10];
				
				var myChart = echarts.init(document.getElementById("div1"));
				/*根据浏览器宽、高设置echarts 宽、高*/
				myChart.resize({
				    width: echartWidth,
				    height: echartHeight
				});
				
				options = {
				    tooltip : {
				        trigger: 'axis'
				    },
				    color:['#4c8caa', '#f19738'],
				    legend: {
				        data:legend,
				        y:'bottom',
				        textStyle:{
				        	color: '#fff'
				        }
				    },
				    xAxis : [
				        {
				            type : 'category',
				            boundaryGap : false,
				            axisLine : {
				            	lineStyle:{
				            		color: '#fff'
				            	}	
				            },
				            data : xAxisData
				        }
				    ],
				    yAxis : [
				        {
				            type : 'value',
				            max : 20,
				            axisLine : {
				            	lineStyle:{
				            		color: '#fff'
				            	}
				            }
				        }
				    ],
				    series : [
				        {
				            name:'新增项目',
				            type:'line',
				            data : data1
				        },
				        {
				            name:'签约项目',
				            type:'line',
				            data : data2
				        }
				    ]
				}
				myChart.setOption(options);
			}
			
			function div2(){
//				var echartWidth = $(window).width() * 0.246;
//				var echartHeight = $(window).height() * 0.298;
				var echartWidth = 500;
				var echartHeight = 300;
				var xAxisData = ['一产项目','二产项目','三产项目','高新科技'];
				
				var myChart = echarts.init(document.getElementById("div2"));
				/*根据浏览器宽、高设置echarts 宽、高*/
				myChart.resize({
				    width: echartWidth,
				    height: echartHeight
				});
				options = {
				    tooltip : {
				        trigger: 'axis'
				    },
				    color:["#348ea9","#54ba9b","#f48b38","#35acfe"],
				    xAxis : [
				        {
				            type : 'category',
				            axisLine : {
				            	lineStyle:{
				            		color: '#fff'
				            	}
				            },
				            data : xAxisData
				        }
				    ],
				    yAxis : [
				        {
				            type : 'value',
				            max:30,
				            axisLine : {
				            	lineStyle:{
				            		color: '#fff'
				            	}
				            }
				        }
				    ],
				    series : [
				        {
				            type:'bar',
				            barWidth:'45',
				            data:[
				            	{
							        value:'12.0',            
							        itemStyle:{
							            color : '#348ea9'
							        }
							    },
							    {
							        value:'24.9',            
							        itemStyle:{
							            color : '#54ba9b'
							        }
							    },
							    {
							        value:'27.0',            
							        itemStyle:{
							            color : '#f48b38'
							        }
							    },
							    {
							        value:'23.2',            
							        itemStyle:{
							            color : '#35acfe'
							        }
							    }
				            ]
				        },
				    ]
				}
				myChart.setOption(options);
			}
			
			function div3(){
//				var echartWidth = $(window).width() * 0.246;
//				var echartHeight = $(window).height() * 0.298;
				var echartWidth = 500;
				var echartHeight = 300;
				
				var myChart = echarts.init(document.getElementById("div3"));
				/*根据浏览器宽、高设置echarts 宽、高*/
				myChart.resize({
				    width: echartWidth,
				    height: echartHeight
				});
				
				options = {
					color:["#348ea9","#54ba9b","#f48b38","#35acfe"],
				    series : [
				        {
				            type:'pie',
				            radius : ['50%', '70%'],
				            itemStyle : {
				                normal : {//正常时样式
				                    label : {
				                        show : true,
				                        position : 'inner',
				                        textStyle : {
				                            fontSize : '15'
				                        }
				                    },
				                    labelLine : {
				                        show : true
				                    }
				                },
				                emphasis : {//鼠标停留时样式
				                    
				                }
				            },
				            data:[
				                {value:335, name:'股份'},
				                {value:310, name:'合资'},
				                {value:234, name:'国有'}
				            ]
				        }
				    ]
				}
				myChart.setOption(options);
			}
			
			function div4(){
//				var echartWidth = $(window).width() * 0.246;
//				var echartHeight = $(window).height() * 0.298;
				var echartWidth = 500;
				var echartHeight = 300;
				
				var myChart = echarts.init(document.getElementById("div4"));
				/*根据浏览器宽、高设置echarts 宽、高*/
				myChart.resize({
				    width: echartWidth,
				    height: echartHeight
				});
				
				options = {
				    tooltip : {
				        formatter: "{a} <br/>{b} : {c}%"
				    },
				    series : [
				        {
				            name:'业务指标',
				            type:'gauge',
				            detail : {formatter:'{value}%'},
				            data:[{value: 38.8, name: '完成率'}]
				        }
				    ]
				};
				myChart.setOption(options);
			}
			
			function div5(){
//				var echartWidth = $(window).width() * 0.246;
//				var echartHeight = $(window).height() * 0.298;
				var echartWidth = 100;
				var echartHeight = 80;
				
				var myChart = echarts.init(document.getElementById("div5"));
				/*根据浏览器宽、高设置echarts 宽、高*/
				myChart.resize({
				    width: echartWidth,
				    height: echartHeight
				});
				
				options = {
					color:["#348ea9","#54ba9b","#f48b38","#35acfe"],
				    title : {
				        text: '合同外资(亿美元)',
				        y:'bottom',
				        x:'center',
				        textStyle:{
				        	fontSize: 12,
    						fontWeight: 'bolder',
    						color: '#fff'
				        }
				    },
				    series : [
				        {
				            name:'预期',
				            type:'funnel',
				            x: '10%',
				            width: '80%',
				            itemStyle: {
				                normal: {
				                    label: {
				                        formatter: '{b}预期'
				                    },
				                    labelLine: {
				                        show : false
				                    }
				                },
				                emphasis: {
				                    label: {
				                        position:'inside',
				                        formatter: '{b}预期 : {c}%'
				                    }
				                }
				            },
				            data:[
				                {value:60, name:'访问'},
				                {value:40, name:'咨询'},
				                {value:20, name:'订单'},
				                {value:80, name:'点击'},
				                {value:100, name:'展现'}
				            ]
				        },
				        {
				            name:'实际',
				            type:'funnel',
				            x: '10%',
				            width: '80%',
				            maxSize: '80%',
				            itemStyle: {
				                normal: {
				                    borderColor: '#fff',
				                    borderWidth: 2,
				                    label: {
				                        position: 'inside',
				                        formatter: '{c}%',
				                        textStyle: {
				                            color: '#fff'
				                        }
				                    }
				                },
				                emphasis: {
				                    label: {
				                        position:'inside',
				                        formatter: '{b}实际 : {c}%'
				                    }
				                }
				            },
				            data:[
				                {value:30, name:'访问'},
				                {value:10, name:'咨询'},
				                {value:5, name:'订单'},
				                {value:50, name:'点击'},
				                {value:80, name:'展现'}
				            ]
				        }
				    ]
				}
				myChart.setOption(options);
			}
			
			function div7(){
//				var echartWidth = $(window).width() * 0.246;
//				var echartHeight = $(window).height() * 0.298;
				var echartWidth = 500;
				var echartHeight = 300;
				
				var myChart = echarts.init(document.getElementById("div7"));
				/*根据浏览器宽、高设置echarts 宽、高*/
				myChart.resize({
				    width: echartWidth,
				    height: echartHeight
				});
				
				options = {
					color:["#348ea9","#54ba9b","#f48b38","#35acfe"],
				    tooltip: {
				        trigger: 'axis',
				        axisPointer: {
				            type: 'cross'
				        }
				    },
				    legend: {
				        bottom: 10,
				        textStyle: {
			                color: '#fff',
			                fontSize: 12
			            },
				        data:['内资注册资本','合同外资','实到外资']
				    },
				    xAxis: [
				        {
				            type: 'category',
				            axisTick: {
				                alignWithLabel: true
				            },
				            axisLine: {
				            	lineStyle: {
				                    color: '#fff'
				                }
				            },
				            axisLabel: {//轴坐标标识样式
					            textStyle: {
					                color: '#fff',
					                fontSize: 12
					            },
				            },
				            data: ['1月','1-2月','1-3月','1-4月','1-5月','1-6月','1-7月','1-8月','1-9月','1-10月','1-11月','1-12月']
				        }
				    ],
				    yAxis: [
				    	{
				            type: 'value',
				            min: 0,
				            max: 100,
				            position: 'left',
				            axisLine: {
				                lineStyle: {
				                    color: '#fff'
				                }
				            },
				            axisLabel: {//轴坐标标识样式
				            	textStyle: {
					                color: '#fff',
					                fontSize: 12
					            },
				                formatter: '{value} '
				            }
				        },
				        {
				            type: 'value',
				            min: 0,
				            max: 250,
				            position: 'right',
				            axisLine: {
				                lineStyle: {
				                    color: '#fff'
				                }
				            },
				            axisLabel: {//轴坐标标识样式
				            	textStyle: {
					                color: '#fff',
					                fontSize: 12
					            },
				                formatter: '{value}'
				            }
				        }
				    ],
				    series: [
				        {
				            name:'内资注册资本',
				            type:'line',
				            yAxisIndex: 1,
				            data:[22.6, 5.9, 9.0, 26.4, 28.7, 70.7, 75.6, 82.2, 48.7, 18.8, 26.0, 28.7]
				        },
				        {
				            name:'合同外资',
				            type:'line',
				            yAxisIndex: 1,
				            data:[21.0, 4.9, 7.0, 23.2, 25.6, 76.7, 35.6, 62.2, 32.6, 20.0, 36.4, 31.3]
				        },
				        {
				            name:'实到外资',
				            type:'line',
				            yAxisIndex: 1,
				            data:[12.0, 32.2, 31.3, 4.5, 16.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 31.3]
				        }
				    ]
				}
				myChart.setOption(options);
			}
			
			function div8(){
//				var echartWidth = $(window).width() * 0.246;
//				var echartHeight = $(window).height() * 0.298;
				var echartWidth = 500;
				var echartHeight = 300;
				
				var myChart = echarts.init(document.getElementById("div8"));
				/*根据浏览器宽、高设置echarts 宽、高*/
				myChart.resize({
				    width: echartWidth,
				    height: echartHeight
				});
				
				options = {
					color:["#ed4743","#54ba9b","#f48b38","#35acfe"],
				    tooltip : {
				        trigger: 'axis',
				        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
				            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
				        }
				    },
				    legend: {
				        x : 'center',
				        y : 'bottom',
//				        itemWidth:'14',
//				        itemHeight:'14',
				        textStyle:{
				        	color:'#fff'
				        },
				        data:['高新技术', '三产','二产','一产']
				    },
				    yAxis : [
				        {
				            type : 'value',
				            axisLine : {
				            	lineStyle:{
				            		color: '#fff'
				            	}
				            }
				        }
				    ],
				    xAxis: [
				        {
				            type : 'category',
				            axisLine : {
				            	lineStyle:{
				            		color: '#fff'
				            	}
				            },
				            data : ['<100亩','100~200亩','200~500亩','>500亩']
				        }
				    ],
				    series : [
				        {
				            name:'高新技术',
				            type:'bar',
				            stack: '总量',
				            itemStyle : { normal: {
				            	label : {show: true, position: 'insideRight'}}
				            },
				            data:[320, 302, 301, 334],
				            barWidth:"45",
				        },
				        {
				            name:'三产',
				            type:'bar',
				            stack: '总量',
				            itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},
				            data:[120, 132, 101, 134],
				            barWidth:"45",
				        },
				        {
				            name:'二产',
				            type:'bar',
				            stack: '总量',
				            itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},
				            data:[220, 182, 191, 234],
				            barWidth:"45",
				        },
				        {
				            name:'一产',
				            type:'bar',
				            stack: '总量',
				            itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},
				            data:[150, 212, 201, 154],
				            barWidth:"45",
				        }
				    ]
				}
				myChart.setOption(options);
			}
			
			function div9(){
//				var echartWidth = $(window).width() * 0.246;
//				var echartHeight = $(window).height() * 0.298;
				var echartWidth = 500;
				var echartHeight = 300;
				
				var myChart = echarts.init(document.getElementById("div9"));
				/*根据浏览器宽、高设置echarts 宽、高*/
				myChart.resize({
				    width: echartWidth,
				    height: echartHeight
				});
				
				options = {
					color:["#ed4743","#54ba9b","#f48b38","#35acfe"],
				    tooltip : {
				        trigger: 'item',
				        formatter: "{a} <br/>{b} : {c} ({d}%)"
				    },
				    legend: {
				        orient : 'vertical',
				        x : 'right',
				        y:'center',
				        itemWidth:'14',
				        itemHeight:'14',
				        textStyle:{
				        	color:'#fff'
				        },
				        data:['<100亩','100~200亩','200~500亩','>500亩']
				    },
				    series : [
				        {
				            name:'用地分析',
				            type:'pie',
				            radius : '55%',
				            center: ['50%', '60%'],
				            itemStyle : {
				                normal : {
				                    label : {
				                        show : true,
				                        position : 'inner',
				                        textStyle : {
				                            fontSize : '10'
				                        },
				                        formatter:"{d}%"
				                    },
				                    labelLine : {
				                        show : true
				                    }
				                }
				            },
				            data:[
				                {value:335, name:'<100亩'},
				                {value:310, name:'100~200亩'},
				                {value:234, name:'200~500亩'},
				                {value:135, name:'>500亩'}
				            ]
				        }
				    ]
				}
				myChart.setOption(options);
			}
			
			function div10(){
//				var echartWidth = $(window).width() * 0.246;
//				var echartHeight = $(window).height() * 0.298;
				var echartWidth = 500;
				var echartHeight = 300;
				
				var myChart = echarts.init(document.getElementById("div10"));
				/*根据浏览器宽、高设置echarts 宽、高*/
				myChart.resize({
				    width: echartWidth,
				    height: echartHeight
				});
				var dataStyle = {
				    normal: {
				        label: {show:false},
				        labelLine: {show:false}
				    }
				};
				var placeHolderStyle = {
				    normal : {
				        color: 'rgba(0,0,0,0)',
				        label: {show:false},
				        labelLine: {show:false}
				    },
				    emphasis : {
				        color: 'rgba(0,0,0,0)'
				    }
				};
				options = {
					color:["#ed4743","#54ba9b","#f48b38","#35acfe"],
				    title: {
				        text: '你幸福吗？',
				        x: 'center',
				        y: 'center',
				        itemGap: 20,
				        textStyle : {
				            color : 'rgba(30,144,255,0.8)',
				            fontFamily : '微软雅黑',
				            fontSize : 35,
				            fontWeight : 'bolder'
				        }
				    },
				    tooltip : {
				        show: true,
				        formatter: "{a} <br/>{b} : {c} ({d}%)"
				    },
				    legend: {
				        orient : 'vertical',
				        x : 300,
				        y : 45,
				        itemGap:12,
				        
				        textStyle:{
				        	color:'#fff'
				        },
				        data:['过的不错','生活压力很大','我姓江']
				    },
				    series : [
				        {
				            name:'1',
				            type:'pie',
				            clockWise:false,
				            radius : [125, 150],
				            itemStyle : dataStyle,
				            data:[
				                {
				                    value:68,
				                    name:'过的不错'
				                },
				                {
				                    value:32,
				                    name:'invisible',
				                    itemStyle : placeHolderStyle
				                }
				            ]
				        },
				        {
				            name:'2',
				            type:'pie',
				            clockWise:false,
				            radius : [100, 125],
				            itemStyle : dataStyle,
				            data:[
				                {
				                    value:29, 
				                    name:'生活压力很大'
				                },
				                {
				                    value:71,
				                    name:'invisible',
				                    itemStyle : placeHolderStyle
				                }
				            ]
				        },
				        {
				            name:'3',
				            type:'pie',
				            clockWise:false,
				            radius : [75, 100],
				            itemStyle : dataStyle,
				            data:[
				                {
				                    value:3, 
				                    name:'我姓江'
				                },
				                {
				                    value:97,
				                    name:'invisible',
				                    itemStyle : placeHolderStyle
				                }
				            ]
				        }
				    ]
				};
				myChart.setOption(options);
			}
			
			function div12(){
//				var echartWidth = $(window).width() * 0.246;
//				var echartHeight = $(window).height() * 0.298;
				var echartWidth = 500;
				var echartHeight = 300;
				
				var myChart = echarts.init(document.getElementById("div12"));
				/*根据浏览器宽、高设置echarts 宽、高*/
				myChart.resize({
				    width: echartWidth,
				    height: echartHeight
				});
				var dataStyle = {
				    normal: {
				        label: {show:false},
				        labelLine: {show:false}
				    }
				};
				var placeHolderStyle = {
				    normal : {
				        color: 'rgba(0,0,0,0)',
				        label: {show:false},
				        labelLine: {show:false}
				    },
				    emphasis : {
				        color: 'rgba(0,0,0,0)'
				    }
				};
				options = {
				    color:["#ed4743","#54ba9b","#f48b38","#35acfe"],
				    title : {
				        text: '分管领导负责项目',
				        x:'center',
				        textStyle:{
				        	fontSize: 14,
    						color: '#fff'
				        }
				    },
				    tooltip : {
				        trigger: 'axis',
				        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
				            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
				        }
				    },
				    legend: {
				        x : 'center',
				        y : 'bottom',
				        textStyle:{
				        	color:'#fff'
				        },
				        data:['正常建设', '完成建设','延后项目','问题项目']
				    },
				    yAxis : [
				        {
				            type : 'value',
				            axisLine : {
				            	lineStyle:{
				            		color: '#fff'
				            	}
				            }
				        }
				    ],
				    xAxis: [
				        {
				            type : 'category',
				            axisLine : {
				            	lineStyle:{
				            		color: '#fff'
				            	}
				            },
				            data : ['A领导','B领导','C领导','D领导']
				        }
				    ],
				    series : [
				        {
				            name:'正常建设',
				            type:'bar',
				            stack: '总量',
				            itemStyle : { normal: {
				            	label : {show: true, position: 'insideRight'}}
				            },
				            data:[320, 302, 301, 334],
				            barWidth:"45",
				        },
				        {
				            name:'完成建设',
				            type:'bar',
				            stack: '总量',
				            itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},
				            data:[120, 132, 101, 134],
				            barWidth:"45",
				        },
				        {
				            name:'延后项目',
				            type:'bar',
				            stack: '总量',
				            itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},
				            data:[220, 182, 191, 234],
				            barWidth:"45",
				        },
				        {
				            name:'问题项目',
				            type:'bar',
				            stack: '总量',
				            itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},
				            data:[150, 212, 201, 154],
				            barWidth:"45",
				        }
				    ]
				};
				myChart.setOption(options);
			}
		</script>
	</body>
</html>
